<template>
  <div>
    <p>商品详情页</p>
    <p>命名路由示例：</p>
    <router-link :to="{
      name: 'view'
    }">去view1页面</router-link>
    <h1>?前：必须要用动态路由才可以：{{$route.params.id}}</h1>
    <h1>?前：必须要用动态路由才可以：{{$route.params.sku}}</h1>
    <h1>?后：{{$route.query.name}}</h1>
    <h1>?后：{{$route.query.age}}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  watch: {
    // 组件被复用，所以生命周期没有执行。通过监听路由变化，来实现这个功能
    $route(to, from) {
      this.getData()
      // js中要带this
      console.log(22,this.$route.params.id);
    }
  },
  // vue路由的钩子函数
  beforeRouteEnter(to, from, next) {
    console.log(666);
    next()
  },
  // vue实例的钩子函数
  created() {
    this.getData()
    console.log(11,this.$route.params.id);
  },
  methods: {
    getData() {
      
    }
  }
}
</script>
<style lang="">
  
</style>